<template>
  <el-card>
    <div class="add-goods">
      <el-form
        :rules="rules"
        :model="goodsInfo"
        ref="goodsForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="商品分类" prop="goods_name">
          <el-cascader
            v-model="goodsInfo.goods_cat"
            :options="cateOptions"
            placeholder="请选择分类"
            :props="{ value: 'cat_id', label: 'cat_name' }"
          ></el-cascader>
        </el-form-item>
        <el-form-item prop="goods_name" label="商品名称">
          <el-input placeholder="请输入商品名称" v-model.trim="goodsInfo.goods_name"></el-input>
        </el-form-item>
        <el-form-item prop="goods_price" label="商品价格">
          <el-input placeholder="请输入商品价格(元)" v-model.trim="goodsInfo.goods_price"></el-input>
        </el-form-item>
        <el-form-item prop="goods_number" label="商品数量">
          <el-input placeholder="请输入商品数量" v-model.trim="goodsInfo.goods_number"></el-input>
        </el-form-item>
        <el-form-item prop="goods_weight" label="商品重量">
          <el-input placeholder="请输入商品重量" v-model.trim="goodsInfo.goods_weight"></el-input>
        </el-form-item>
        <el-form-item label="板式">
          <div>
            <el-checkbox
              v-for="item in graphyList"
              :key="item.attr_id"
              v-model="item.checked"
              :label="item.attr_name"
              border
            ></el-checkbox>
          </div>
        </el-form-item>
        <el-form-item label="商品图片">
          <el-upload
            action="https://www.aerowang.cn/api/private/v1/upload"
            :headers="{ Authorization: token }"
            list-type="picture-card"
            :on-success="uploadChange"
            :on-remove="handleRemove"
            :file-list="goodsInfo.pics"
          >
            <template #default>
              <i class="el-icon-plus"></i>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="商品描述">
          <wang-editor @deliverEdit="getWangEditor" v-model:editText="goodsInfo.goods_introduce" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAddGoods">立即创建</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<script>
import { onMounted, reactive, toRefs, ref } from 'vue'
import { get__token } from '../../plugins/storege'
import { ElMessage } from 'element-plus'
import {
  GET_GOODSCATE,
  GET_GRAPHYLIST,
  ADD_GOODS,
  GETGOODSDETAIL,
} from '../../api/request'
import WangEditor from '../../components/WangEditor.vue'
import { useRoute } from 'vue-router'

export default {
  components: { WangEditor },
  props: {
    drawer: {
      type: Boolean,
      default: true,
    },
  },
  setup(props) {
    const goodsForm = ref(null)
    const Route = useRoute()
    const state = reactive({
      token: get__token(),
      goodsInfo: {
        goods_name: '', //商品名称
        goods_cat: '', //分类列表,
        goods_price: '', //价格
        goods_number: '', //数量
        goods_weight: '', //重量
        goods_introduce: '', //富文本
        pics: [], //图片路径
        attrs: [], //商品参数
      }, //商品数据
      checked1: true,
      checked2: true,
      cateOptions: [], //商品分类
      graphyList: [], //版式
      rules: {
        goods_name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
        ],
        goods_price: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
        ],
        goods_number: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
        ],
        goods_weight: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
        ],
      },
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
    })
    // 关闭添加商品弹窗
    const handleClose = (done) => {
      state.drawer = false
      done()
    }
    // 获取商品信息
    const getGoodsInfo = async () => {
      // 商品分类
      const { data: cateOptions } = await GET_GOODSCATE()
      state.cateOptions = cateOptions
      // 商品版式
      const { data } = await GET_GRAPHYLIST('many')
      const graphyList = data.map((e) => {
        return {
          ...e,
          checked: false,
        }
      })
      state.graphyList = graphyList
    }
    // 删除图片
    const handleRemove = (file) => {
      console.log(file)
      const filePath = file.url
      //  找到对应图片的 执行删除
      state.goodsInfo.pics = state.goodsInfo.pics.filter(
        (e) => e.url !== filePath
      )
    }

    const uploadChange = (res) => {
      const { tmp_path } = res.data
      // 添加的图片url放入数组中
      state.goodsInfo.pics = [{ pic: tmp_path }, ...state.goodsInfo.pics]
    }
    // 添加商品
    const handleAddGoods = () => {
      const { goodsInfo: newGoodsInfo, graphyList } = state

      newGoodsInfo.goods_cat = newGoodsInfo.goods_cat.join(',')
      newGoodsInfo.attrs = graphyList.map((e) => {
        return {}
      })

      // 登录前验证
      goodsForm.value.validate((valid) => {
        if (valid) {
          ADD_GOODS(newGoodsInfo).then((res) => {
            if (res.meta.status === 201) ElMessage.success(res.meta.msg)
          })
        } else {
          ElMessage.error('请填写信息')
        }
      })
    }
    const getWangEditor = (val) => {
      // console.log(val)
    }
    // 判断是不是编辑商品
    const getEditGoods = async () => {
      const { id } = Route.query
      if (id) {
        const { data } = await GETGOODSDETAIL(id)
        state.goodsInfo.goods_cat = data.goods_cat.split(',').map(Number)
        state.goodsInfo.goods_name = data.goods_name
        state.goodsInfo.goods_price = data.goods_price
        state.goodsInfo.goods_number = data.goods_number
        state.goodsInfo.goods_weight = data.goods_weight
        state.goodsInfo.attrs = data.attrs
        state.goodsInfo.goods_introduce = data.goods_introduce
        state.goodsInfo.pics = data.pics.map((e) => {
          return { url: e.pics_mid_url }
        })
      } else return false
    }
    onMounted(() => {
      getGoodsInfo()
      getEditGoods()
    })

    return {
      ...toRefs(state),
      goodsForm,
      handleClose,
      handleRemove,
      uploadChange,
      handleAddGoods,
      getWangEditor,
    }
  },
}
</script>

<style lang="scss">
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.goods-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.table-head {
  margin: 0 0 20px;
}
.el-drawer {
  width: 50%;
}
.add-goods {
  .el-input {
    width: 80%;
  }
}
.el-checkbox {
  margin: 0 0 10px;
  max-width: 140px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  margin-right: 10px;
}
.el-button + .el-button,
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
  margin-left: 0;
  margin-right: 10px;
}
.el-checkbox__label {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.el-form-item__content {
  z-index: 1;
}
.el-checkbox.is-bordered.is-checked {
  margin-right: 10px;
}
.el-drawer {
  overflow-y: auto;
}
</style>
